// 插件注册
// Vue可扩展的功能：全局组件，自定义指令，挂在原型方法
// Vue2.0:导出一个对象，有install函数，默认传入Vue构造函数，Vue基础之上扩展
// Vue3.0：导出一个对象，有install函数，默认传入App实例，app基础之上扩展
// import Skeleton from './Skeleton.vue'
// import Carousel from './Carousel.vue'
// import More from './More.vue'
import defaultImg from 'assets/images/200.png'
import Toast from './toast'
import Confirm from './confirm'
// import Bread from './Bread.vue'
// import BreadItem from './BreadItem.vue'
// 批量导入组件
// 导入library文件夹下的所有组件
// 批量导入需要使用一个函数 require.context(dir,deep,matching)
// 参数：1. 目录  2. 是否加载子目录  3. 加载的正则匹配
const importFn = require.context('./', false, /\.vue$/)
// console.dir(importFn.keys())
// 文件名称数组

export default {
  install (app) {
    // app.component(Skeleton.name, Skeleton)
    // app.component(Carousel.name, Carousel)
    // app.component(More.name, More)
    // app.component(Bread.name, Bread)
    // app.component(BreadItem.name, BreadItem)
    // 批量注册全局组件
    importFn.keys().forEach((key) => {
      // 导入组件
      const component = importFn(key).default
      // 注册组件
      app.component(component.name, component)
    })

    // 挂载指令
    defineDirective(app)
    // Vue3挂载原型函数app.config.globalProperties,如果用选项API，this调用
    app.config.globalProperties.$Toast = Toast
    app.config.globalProperties.$Confirm = Confirm
  }
}

// 定义指令
const defineDirective = (app) => {
  // 图片懒加载指令,v-lazy
  // 懒加载原理：储存图片地址，不放在src上，当图片进入可视区，将存储的图片地址设置给src
  app.directive('lazy', {
    // Vue2.0用inserted监听DOM是否创建完毕
    // Vue3.0中用mounted
    mounted (el, binding) {
      // 观察当前元素
      const observer = new IntersectionObserver(
        ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 一次观察,停止观察
            observer.unobserve(el)
            // 若图片加载失败，使用该默认图片
            el.onerror = () => {
              el.src = defaultImg
            }
            // 组件使用指令传来的值进行操作
            el.src = binding.value
          }
        },
        {
          threshold: 0
        }
      )
      // 挂载元素,开始观察
      observer.observe(el)
    }
  })
}
